<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <div id="app">
            <input type="text" v-model="num1" placeholder="第一个数字"/>
            <select name="sel" id="sel" v-model="sel">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">x</option>
                <option value="/">/</option>
                <option value="**">^</option>
            </select>
            <input type="text" v-model="num2" placeholder="第二个数字"/>
            <input type="button" value="=" @click="cal"/>
            <input type="text" v-model="res"/>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    num1: null,
                    num2: null,
                    sel: '+',
                    res: null
                },
                methods: {
                    cal(){
                        if (this.sel === "+"){
                            this.res = parseFloat(this.num1) + parseFloat(this.num2)
                        } else if (this.sel === "-") {
                            this.res = parseFloat(this.num1) - parseFloat(this.num2)
                        } else if (this.sel === "*") {
                            this.res = parseFloat(this.num1) * parseFloat(this.num2)
                        } else if (this.sel === "/") {
                            this.res = parseFloat(this.num1) / parseFloat(this.num2)
                        } else {
                            this.res = parseFloat(this.num1) ** parseFloat(this.num2)
                        }
                    }
                }
            })
        </script>
        
    </body>
</html>